<template>
  <div class="user_wrap">
    <BreadCrumb crumb="订单管理>订单详情"></BreadCrumb>

    <div class="center_wrap">
      <div class="order_detail_title_con">
        <h1 class="order_detail_title">订单详情</h1>
        <router-link to="/home/order" class="order_back">返回</router-link>
      </div>

      <!-- 展示数据的主要内容区 -->
      <el-row class="order_line">
        <el-col :span="8">订单号：{{ oOrder.order_id }}</el-col>
        <el-col :span="8">时间：{{ oOrder.created_time | formatDate }}</el-col>
        <el-col :span="8">用户：{{ oOrder.user_name }}</el-col>
      </el-row>
      <el-row class="order_line">
        <el-col :span="8">商品总数：{{ oOrder.total_count }}</el-col>
        <el-col :span="8">总价：{{ oOrder.total_amount }}</el-col>
        <el-col :span="8">运费：{{ oOrder.freight }}</el-col>
      </el-row>
      <el-row class="order_line">
        <!-- <el-col :span="8">付款方式：{{ oOrder.status_name }}</el-col> -->
        <el-col :span="8">付款方式：{{ oOrder.pay_method | paystyle }}</el-col>
        <el-col :span="8"
          >状态：{{
            oOrder.status | process
          }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-button
            size="mini"
            round
            @click="pop_show = true"
            >修改状态</el-button
          ></el-col
        >
      </el-row>
      <el-table
        :data="oOrder.skus"
        border
        style="margin: 20px auto 0px"
        size="medium"
      >
        <!-- 展示订单中的商品 -->
        <el-table-column label="商品图片" width="150">
          <template slot-scope="scope">
            <img :src="host + scope.row.sku.image_default" width="102" />
          </template>
        </el-table-column>
        <el-table-column prop="sku.name" label="商品名称"></el-table-column>
        <el-table-column prop="price" label="商品价格"></el-table-column>
        <el-table-column prop="count" label="商品数量"></el-table-column>
      </el-table>
    </div>

    <!-- 修改债台的对话框 -->
    <el-dialog title="修改状态" :visible.sync="pop_show" append-to-body>
      <el-form
        :model="statusForm"
        status-icon
        ref="statusForm"
        label-width="100px"
      >
        <el-form-item label="订单状态：" prop="status">
          <el-select v-model="statusForm.status" size="small">
            <el-option
              v-for="item in status_list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="pop_show = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
let token = localStorage.token;
import cons from "@/components/constant";
import BreadCrumb from "@/components/widget/BreadCrumb";
export default {
  name: "SpuAdd",
  data() {
    return {
      host: cons.apis,
      edit_id: "",
      oOrder: {},
      pop_show: false,
      statusForm: {
        status: "",
      },
      status_list: [
        { id: 1, name: "待支付" },
        { id: 2, name: "待发货" },
        { id: 3, name: "待收货" },
        { id: 4, name: "待评价" },
        { id: 5, name: "已完成" },
        // { id: 6, name: "已取消" },
      ],
    };
  },
  components: {
    BreadCrumb,
  },
  methods: {
    
    // 获取订单的详细信息
    fnGetThisDetail() {
      this.axios
        .get(cons.apis + "/orders/info/" + this.edit_id + "/", {
          headers: {
            Authorization: "JWT " + token,
          },
          responseType: "json",
        })
        .then((dat) => {
          console.log("单个订单信息》》", dat);
          this.oOrder = dat.data;
          this.edit_id = dat.data.data.order_id;
          console.log("new -id》》", this.edit_id);
          this.statusForm.status = dat.data.data.status;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 修改订单状态
    submitForm() {
     
      this.axios
        .put(
          cons.apis + "/orders/info/" + this.edit_id + "/",
          {
            status: this.statusForm.status,
          },
          {
            headers: {
              Authorization: "JWT " + token,
            },
            responseType: "json",
          }
        )
        .then((dat) => {
          this.$message({
            type: "success",
            message: "修改状态成功!",
          });
          this.pop_show = false;
          this.fnGetThisDetail();
        })
        .catch((err) => {
          console.log(err.response);
        });
    },
  },
  mounted() {
    // 获取父组件传递来的订单id
    this.edit_id = this.$route.params.sEdit_id;
    console.log("订单id", this.edit_id);
    //获取指定订单的详细信息
    this.fnGetThisDetail();
  },
  filters: {
    process: function (val) {
      if (val == "") {
        return;
      }
      if (val == 1) {
        return "待支付";
      } else if (val == 2) {
        return "待发货";
      } else if (val == 3) {
        return "待收货";
      } else if (val == 4) {
        return "待评价";
      } else if (val == 5) {
        return "已完成";
      } 
    },
    paystyle: function (val) {
      if (val == "") {
        return;
      }
      if (val == 1) {
        return "支付宝";
      } else if (val == 2){
        return "微信支付";
      } else if (val == 3){
        return "银联支付";
      }else {
        return "货到付款";
      }
    },
    //格式化时间
    formatDate(data) {
      // let data = row[col.property];
      if (data == null) {
        return;
      }
      // 创建日期对象
      let date = new Date(data);
      
      return (
        date.getFullYear() +
        "-" +
        (date.getMonth() + 1) +
        "-" +
        date.getDate() +
        "-" +
        date.getHours() +
        ":" +
        date.getMinutes() +
        ":" +
        date.getSeconds()
      );
    },
  },
};
</script>

<style scoped>
.center_wrap {
  width: 95.2%;
  overflow: hidden;
  margin: 10px auto 10px;
}
.order_detail_title_con {
  overflow: hidden;
}
.order_detail_title {
  line-height: 24px;
  font-size: 18px;
  color: #303133;
  margin: 10px 0px 20px;
  float: left;
}
.order_back {
  float: right;
  margin: 10px 0px 20px;
  color: #666;
  font-size: 14px;
}
.order_line {
  line-height: 45px;
  border-bottom: 1px solid #ddd;
  font-size: 14px;
}
.order_box {
  line-height: 40px;
  border: 1px solid #ddd;
  font-size: 14px;
  margin-top: -1px;
}
.order_box2 {
  border: 1px solid #ddd;
  font-size: 14px;
  margin-top: -1px;
  padding: 10px 0px;
}
.text-center {
  text-align: center;
}
.pt30 {
  padding-top: 30px;
}
</style>
